<template>
  <div class='wf-student'>
    <Search :searchInfo="searchInfo" :pageInfo="pageInfo" :selectData="selectData" :getListData="getListData" />
    <div class="rea-search">
      <span v-for="(item,index) in btns" :key="index" :class="{'is-active':item.value==searchInfo.sort}" @click="setOrder(item)">{{item.label}}</span>
      <RelSearch class="real" :search="searchInfo" @new_search="getSearch" />
    </div>
    <List :listData="listData" @forMore="getMoreInfo">
      <ListModel :listData="listData" :routerDetail="routerDetail" />
    </List>
  </div>
</template>
<script>
import Search from './model/search'
import RelSearch from '../../../../components/search.vue'
import MixIns from '../../../../mixin/mixin.js'
import List from '../../../../components/list.vue'
import ListModel from './model/list'
export default {
  components: {Search,RelSearch,List,ListModel},
  name: "",
  data() {
    return {
      searchInfo:{
        year:"",
        major:"",
        class:"",
        search:"",
        sort:"1",
      },

      btns:[
        {label:"升序",value:0},
        {label:"降序",value:1}
      ]
    };
  },
  methods: {
    getYear(){
      this.$set(this.searchInfo,"year",new Date().getFullYear()+"-"+(new Date().getFullYear()+1))
    },
    setOrder(item){
      this.$set(this.searchInfo,"sort",item.value)
      this.getListData()
    },
    getSearch(){
      this.pageInfo.page=1
      this.getListData()
    }
  },
  created() {
    this.searchInfo.sort=this.$store.state.tabActive
    this.getYear()
  },
  mixins:[MixIns]
};
</script>
<style lang="scss" scoped>
.wf-student {

  .rea-search{
    background: rgb(0, 153, 141);
    display: flex;
    box-sizing: border-box;
    border-top: 1px solid #fff;

    >span{
      display: inline-block;
      line-height: 100px;
      padding-left: 20px;
      color: #ccc;
    }
    >span.is-active{
      color: #fff;
      // text-decoration: underline;
    }

    .real{
      flex: 1
    }
  }
}
</style>